<template>
  <Page name="确认代付人信息">
    <div class="sticky-tip" v-if="showTip">
      <i class="ic ic-tip-yellow mr12"></i>
      <p class="mr12">为了确保你的交易信息的私密性，请确定代付人信息</p>
      <i class="css-close" @click="showTip=false"></i>
    </div>
    <div class="info-card fxv-center">
      <div class="avatar" v-if="userInfo.avatar">
        <img :src="userInfo.avatar">
      </div>
      <div class="name">{{userInfo.name}}</div>
      <div class="account">{{userInfo.display_account}}</div>
    </div>

    <form @keypress.enter="submit" onsubmit="return false">
      <div class="form-card">
        <div class="item fx fx-vc fx-between">
          <div class="label">代付金额</div>
          <div class="right">{{form.amount}} {{form.currency_code}}</div>
        </div>
        <div class="item fx fx-vc fx-between">
          <div class="label">订单信息</div>
          <div class="right">{{form.order_info}}</div>
        </div>

        <div class="item">
          <Input v-model="remark" placeholder="添加备注(20字以内)" maxlength="20"/>
        </div>
      </div>
      <div class="form-btn">
        <button type="button" :disabled="posting" class="btn btn-primary btn-block submit" @click="submit">确认找他/她代付</button>
      </div>
    </form>
  </Page>
</template>

<script>
import Page from '~/components/page'
import Input from '~/components/Input'
export default {
  components:{
    Page,
    Input,
  },
  validate({store,redirect}){
    if(!store.state.elsepay.userInfo || !store.state.elsepay.form){
      redirect('/elsepay')
    }
    return true;
  },
  asyncData({store}){

    return {
      form:store.state.elsepay.form,
      remark:store.state.elsepay.remark,
      userInfo: store.state.elsepay.userInfo,
    }
  },
  data(){
    return {
      showTip:true,
      posting:false,
    }
  },
  methods:{
    async submit(){
      if(this.posting) return false;
      this.posting = true;
      try {
        let { data:rs } = await this.$axios.post('?ct=api&ac=else_pay_req',{
          order_id:this.form.order_id,
          shop_id:this.form.shop_id,
          pay_uid:this.userInfo.uid,
          remark:this.remark
        })

        if(rs.code == 0){
          this.$store.commit('elsepay/setRemark',this.remark)
          this.$store.commit('elsepay/setStatus',rs.data)

          this.$router.push({name:'elsepay-status'})
        }else{
          this.$toast(rs.msg);
        }

      }catch(e){
        this.$error(e);
        this.$toast('请求失败');
      }
      this.posting = false;

    },
  }
}
</script>

<style lang="less" scoped>
  .sticky-tip {
    position:sticky;
    top:@app-header-height;
    padding:15px 30px;
    display: flex;
    align-items: center;
    background-color:#fcf8eb;
    p {
      flex:1;
      font-size:24px;
      line-height: 1.2;
      color:#d39b00;
    }


  }
  .form-card {
    .amount-box {
      position:relative;
      .tip-box {
        position:absolute;
        left:0;
        bottom:30px;
        margin:0 30px;
      }
    }
    .item {
      padding:30px;
      font-size:32px;
      background-color:#fff;
      & + .item {
        border-top:1px solid #ededf0;
      }
      .label {
        color:rgb(102,102,102);
      }
      .right {
        color:rgb(41,41,41);
      }
    }
  }
  .form-btn {
    padding:30px;
    margin-top:60px;
  }

  .info-card {
    padding:40px;
    background-color:#fff;
    .avatar {
      width: 140px;
      height:140px;
      border-radius: 50%;
      overflow: hidden;

      img {
        display: block;
        width:100%;
        height: 100%;
      }
    }

    .name {
      .text-ellipsis();
      max-width:100%;
      margin-top:20px;
      font-size:32px;
      color:#292929;
    }
    .account {
      .text-ellipsis();
      max-width:100%;
      margin-top:20px;
      font-size:28px;
      color:#999;
    }
    .check {
      margin-top:30px;
      font-size:28px;
      color:#2086f9;

      .ok {
        color:#d39b00;
      }
    }
  }
</style>
